import React, { useMemo } from 'react';
import {
  Skia,
  SkPoint,
  SkParagraph,
  SkSVG,
  TextAlign,
  FontWeight,
  Paragraph,
  Circle,
  Shadow,
  ImageSVG,
  LinearGradient,
  vec,
} from '@shopify/react-native-skia';
import { HALF_NODE_BACKGROUND_SIZE } from './Constants';
import { useGetTheme } from '@/hooks/useTheme';

type EnergyNodeProps = {
  circleCenter: SkPoint;
  textPlacement: 'bottom' | 'right' | 'none';
  iconSource: SkSVG | null;
  visible: boolean;
  nodeTitle: string | undefined;
  nodeValue: string | undefined;
};

const EnergyNode: React.FC<EnergyNodeProps> = React.memo((props) => {
  const colorScheme = useGetTheme();
  const isDark = colorScheme === 'dark';
  // TODO: 暗色渐变色背景
  const circlebackgrounds = isDark
    ? ['#FBF8F1', '#FFF']
    : ['#FBF8F1', '#FFF'];
  // const circleBackground = isDark ? '#242A30' : 'white';
  // const titleTextColor = appTheme.colors?.neutral?.secondaryTitle ?? '#8c8c8c';
  // const valueTextColor = appTheme.colors?.neutral?.title ?? '#000';

  const titleTextColor = isDark ? 'rgba(255, 255, 255, 0.7)' : '#8C8C8C';
  const valueTextColor = isDark ? 'rgba(255, 255, 255, 0.9)' : '#262626';

  const showTextNodes = props.textPlacement !== 'none';
  let textPosition: SkPoint = { x: 0, y: 0 };
  if (props.textPlacement === 'bottom') {
    textPosition = {
      x: props.circleCenter.x - 50,
      y: props.circleCenter.y + HALF_NODE_BACKGROUND_SIZE + 6,
    };
  } else if (props.textPlacement === 'right') {
    textPosition = {
      x: props.circleCenter.x + HALF_NODE_BACKGROUND_SIZE + 12,
      y: props.circleCenter.y - 16,
    };
  }

  // const nodeValueParagraph: SkParagraph = useMemo(() => {
  //   return Skia.ParagraphBuilder.Make({
  //     textAlign: TextAlign.Left,
  //     maxLines: 2,
  //     textStyle: {
  //       fontSize: 17,
  //       color: Skia.Color(valueTextColor),
  //       fontStyle: {
  //         weight: FontWeight.Medium,
  //       },
  //     },
  //   })
  //     .addText(props.nodeValue ?? '')
  //     .build();
  // }, [props.nodeTitle, props.nodeValue]);

  // const nodeTitleParagraph: SkParagraph = useMemo(() => {
  //   return Skia.ParagraphBuilder.Make({
  //     textAlign: TextAlign.Center,
  //     maxLines: 2,
  //     textStyle: {
  //       fontSize: 12,
  //       color: Skia.Color(titleTextColor),
  //     },
  //   })
  //     .addText(props.nodeTitle ?? '')
  //     .build();
  // }, [props.nodeTitle, props.nodeValue]);

  const nodeParagraph: SkParagraph = useMemo(() => {
    return Skia.ParagraphBuilder.Make({
      textAlign:
        props.textPlacement === 'bottom' ? TextAlign.Center : TextAlign.Left,
      maxLines: 2,
      textStyle: {
        fontSize: 12,
        color: Skia.Color(titleTextColor),
      },
    })
      .addText(props.nodeTitle ?? '')
      .addText('\n')
      .pushStyle({
        fontSize: 17,
        color: Skia.Color(valueTextColor),
        fontStyle: {
          weight: FontWeight.Medium,
        },
      })
      .addText(props.nodeValue ?? '')
      .build();
  }, [
    props.nodeTitle,
    props.nodeValue,
    titleTextColor,
    valueTextColor,
    props.textPlacement,
  ]);

  if (!props.visible) {
    return null;
  }

  return (
    <>
      {showTextNodes && (
        <Paragraph
          paragraph={nodeParagraph}
          x={textPosition.x}
          y={textPosition.y}
          width={100}
        />
      )}
      <Circle
        cx={props.circleCenter.x}
        cy={props.circleCenter.y}
        r={HALF_NODE_BACKGROUND_SIZE}
      >
        <LinearGradient
          start={vec(
            props.circleCenter.x - HALF_NODE_BACKGROUND_SIZE,
            props.circleCenter.y - HALF_NODE_BACKGROUND_SIZE
          )}
          end={vec(
            props.circleCenter.x + HALF_NODE_BACKGROUND_SIZE,
            props.circleCenter.y + HALF_NODE_BACKGROUND_SIZE
          )}
          colors={circlebackgrounds}
        />
        <Shadow dx={0} dy={2} blur={6} color={'rgba(0, 91, 55, 0.06)'} />
        <ImageSVG
          svg={props.iconSource}
          width={28}
          height={28}
          x={props.circleCenter.x - 14}
          y={props.circleCenter.y - 14} // 图标底部就是矩形的中心点
        />
        {/* <Paragraph
            paragraph={nodeTitleParagraph}
            x={props.circleCenter.x - HALF_NODE_BACKGROUND_SIZE}
            y={props.circleCenter.y + 2}
            width={NODE_BACKGROUND_SIZE}
          /> */}
      </Circle>
    </>
  );
});

export default EnergyNode;
